<extend name="Layout/index" />

<block name="breadcrumb-01">
	<li>
		<i class="icon-home home-icon"></i>
		<a href="#">首页</a>
	</li>
	<li class="active">个人管理</li>
</block>

<block name="breadcrumb-02">
	<h1>
		个人中心
		<small>
			<i class="icon-double-angle-right"></i>
			 资料管理
		</small>
	</h1>
</block>
<block name="include">
	<script src="__PUBLIC__/js/jquery.min.js"></script>
	<script src="__PUBLIC__/assets/js/ace-extra.min.js"></script>
</block>

<block name="main">	
	<div id="user-profile-3" class="user-profile row">
		<div class="col-sm-offset-1 col-sm-10">
			<div class="well well-sm">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				&nbsp;
				<div class="inline middle blue bigger-110"> 你的个人资料已完成70%</div>

				&nbsp; &nbsp; &nbsp;
				<div style="width:200px;" data-percent="70%" class="inline middle no-margin progress progress-striped active">
					<div class="progress-bar progress-bar-success" style="width:70%"></div>
				</div>
			</div><!-- /well -->

			<div class="space"></div>

			<form action="<{:U('Profile/infoAdd')}>" method="post" class="form-horizontal">
				<div class="tabbable">
					<ul class="nav nav-tabs ">
						<li class="active">
							<a data-toggle="tab" href="#edit-basic">
								<i class="green icon-edit bigger-125"></i>
								基本信息设置
							</a>
						</li>

						<li>
							<a data-toggle="tab" href="#edit-settings">
								<i class="purple icon-cog bigger-125"></i>
								功能设置
							</a>
						</li>

						<li>
							<a data-toggle="tab" href="#edit-password">
								<i class="blue icon-key bigger-125"></i>
								密码重置
							</a>
						</li>
					</ul>

					<div class="tab-content profile-edit-tab-content">
						<div id="edit-basic" class="tab-pane in active">
							<h4 class="header blue bolder smaller">综合</h4>
							<input type="hidden" name="uid" value="<{$data.id}>">
							<div class="row">
								<div class="col-xs-12 col-sm-4">
									<input type="file" />
								</div>

								<div class="vspace-xs"></div>

								<div class="col-xs-12 col-sm-8">
									<div class="form-group">
										<label class="col-sm-4 control-label no-padding-right" for="form-field-username">昵称</label>

										<div class="col-sm-8">
											<input readonly class="col-xs-12 col-sm-10" type="text" id="form-field-username" placeholder="Username" value="<{$data.username}>" />
										</div>
									</div>

									<div class="space-4"></div>

									<div class="form-group">
										<label class="col-sm-4 control-label no-padding-right" for="form-field-first">真实姓名</label>
										<div class="col-sm-8">
											<input readonly class="input-small" type="text" id="form-field-first" placeholder="名字" value="<{$data.name}>" />
										</div>
									</div>

									<div class="space-4"></div>

									<div class="form-group">
										<label class="col-sm-4 control-label no-padding-right" for="form-field-username">身份</label>
										<div class="col-sm-8">
											<input readonly type="text" id="form-field-username" placeholder="贫农" value="<{$data.degree}>" />
										</div>
									</div>
								</div>
							</div>

							<hr />
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-date">出生日期</label>

								<div class="col-sm-9">
									<div class="input-medium">
										<div class="input-group">
											<input name="birthday" class="input-medium date-picker" id="form-field-date" type="text" data-date-format="dd-mm-yyyy" placeholder="dd-mm-yyyy"
											value="<{$data.birthday}>" />
											<span class="input-group-addon">
												<i class="icon-calendar"></i>
											</span>
										</div>
									</div>
								</div>
							</div>

							<div class="space-4"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">性别</label>

								<div class="col-sm-9">
								<if condition="$data.">
									<label class="inline">
										<input name="sex" type="radio" class="ace" <{$data['sex'] == 0?'checked':''}>/>
										<span class="lbl"> 男</span>
									</label>

									&nbsp; &nbsp; &nbsp;
									<label class="inline">
										<input name="sex" type="radio" class="ace" />
										<span class="lbl" <{$data['sex'] == 1?'checked':''}>> 女</span>
									</label>
								</div>
							</div>

							<div class="space-4"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-comment">自我介绍</label>

								<div class="col-sm-9">
									<textarea name="desc" id="form-field-comment"><{$data.desc}></textarea>
								</div>
							</div>

							<div class="space"></div>
							<h4 class="header blue bolder smaller">联系方式</h4>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-email">邮箱</label>

								<div class="col-sm-9">
									<span class="input-icon input-icon-right">
										<input name="email" type="email" id="form-field-email" value="<{$data.email}>" />
										<i class="icon-envelope"></i>
									</span>
								</div>
							</div>

							<div class="space-4"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-website">博客</label>

								<div class="col-sm-9">
									<span class="input-icon input-icon-right">
										<input name="web" type="url" id="form-field-website" value="<{$data.web}>" />
										<i class="icon-globe"></i>
									</span>
								</div>
							</div>

							<div class="space-4"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-phone">电话</label>

								<div class="col-sm-9">
									<span class="input-icon input-icon-right">
										<input name="phone" class="input-medium input-mask-phone" type="text" id="form-field-phone" value="<{$data.phone}>"/>
										<i class="icon-book icon-flip-horizontal"></i>
									</span>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-phone">手机</label>

								<div class="col-sm-9">
									<span class="input-icon input-icon-right">
										<input name="telephone" class="input-medium input-mask-telephone" type="text" id="form-field-phone" value="<{$data.telephone}>"/>
										<i class="icon-phone icon-flip-horizontal"></i>
									</span>
								</div>
							</div>

							<div class="space"></div>
							<h4 class="header blue bolder smaller">社交媒体</h4>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-facebook">Facebook</label>

								<div class="col-sm-9">
									<span class="input-icon">
										<input name="facebook" type="text"  id="form-field-facebook" placeholder="facebook_account" value="<{$data.facebook}>"/>
										<i class="icon-facebook blue"></i>
									</span>
								</div>
							</div>

							<div class="space-4"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-weibo">微博</label>

								<div class="col-sm-9">
									<span class="input-icon">
										<input name="weibo" type="text" placeholder="weibo_account" value="<{$data.weibo}>" id="form-field-twitter" />
										<i class="icon-adjust light-blue"></i>
									</span>
								</div>
							</div>

							<div class="space-4"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-gplus">微信</label>

								<div class="col-sm-9">
									<span class="input-icon">
										<input name="weixin" type="text" placeholder="weixin_account" value="<{$data.weixin}>" id="form-field-gplus" />
										<i class="icon-comments red"></i>
									</span>
								</div>
							</div>
						</div>

						<div id="edit-settings" class="tab-pane">
							<div class="space-10"></div>

							<div>
								<label class="inline">
									<input type="checkbox" name="form-field-checkbox" class="ace" />
									<span class="lbl">公开个人资料</span>
								</label>
							</div>

							<div class="space-8"></div>

							<div>
								<label class="inline">
									<input type="checkbox" name="form-field-checkbox" class="ace" />
									<span class="lbl">推送最新状态</span>
								</label>
							</div>

							<div class="space-8"></div>

							<div>
								<label class="inline">
									<input type="checkbox" name="form-field-checkbox" class="ace" />
									<span class="lbl">简讯记录</span>
								</label>

								<label class="inline">
									<span class="space-2 block"></span>

									持续
									<input type="text" class="input-mini" maxlength="3" />
									天
								</label>
							</div>
						</div>

						<div id="edit-password" class="tab-pane">
							<div class="space-10"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-pass1">手机号码</label>

								<div class="col-sm-9">
									<input type="text" name="myphone" id="form-field-pass1" />
								</div>
							</div>

							<div class="space-4"></div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-pass2"><a href="<{:U('Profile/reset')}>">发送短信</a></label>

								<div class="col-sm-9">
									<input type="text" name="code" id="form-field-pass2" />
								</div>
							</div>

							<div class="space-4"></div>
	
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-pass2">重置密码</label>

								<div class="col-sm-9">
									<input type="password" name="psw" id="form-field-pass2" />
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="clearfix form-actions">
					<div class="col-md-offset-3 col-md-9">
						<button class="btn btn-info" type="submit">
							<i class="icon-ok bigger-110"></i>
							保存
						</button>

						&nbsp; &nbsp;
						<button class="btn" type="reset">
							<i class="icon-undo bigger-110"></i>
							重置
						</button>
					</div>
				</div>
			</form>
		</div><!-- /span -->
	</div><!-- /user-profile -->
								

		<!-- basic scripts -->

		<!--[if !IE]> -->
	<script>
    //绑定事件
    $('label').click(function() {
    	//请求后台响应
        $.ajax({
            type:'get',
            url: "<{:U('Profile/reset')}>",
            success:function(data){
            },
            dataType:'json',
       		 })
        	return false;
   		 })
    </script>	
	<script src="__PUBLIC__/Js/jquery.min.js"></script>

	<!-- <![endif]-->

	<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

	<!--[if !IE]> -->

	<script type="text/javascript">
		window.jQuery || document.write("<script src='__PUBLIC__/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
	</script>

	<!-- <![endif]-->

	<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='__PUBLIC__/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

	<script type="text/javascript">
		if("ontouchend" in document) document.write("<script src='__PUBLIC__/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
	</script>
	<script src="__PUBLIC__/assets/js/bootstrap.min.js"></script>
	<script src="__PUBLIC__/assets/js/typeahead-bs2.min.js"></script>

	<!-- page specific plugin scripts -->

	<!--[if lte IE 8]>
	  <script src="__PUBLIC__/assets/js/excanvas.min.js"></script>
	<![endif]-->

	<script src="__PUBLIC__/assets/js/jquery-ui-1.10.3.custom.min.js"></script>
	<script src="__PUBLIC__/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="__PUBLIC__/assets/js/jquery.gritter.min.js"></script>
	<script src="__PUBLIC__/assets/js/bootbox.min.js"></script>
	<script src="__PUBLIC__/assets/js/jquery.slimscroll.min.js"></script>
	<script src="__PUBLIC__/assets/js/jquery.easy-pie-chart.min.js"></script>
	<script src="__PUBLIC__/assets/js/jquery.hotkeys.min.js"></script>
	<script src="__PUBLIC__/assets/js/bootstrap-wysiwyg.min.js"></script>
	<script src="__PUBLIC__/assets/js/select2.min.js"></script>
	<script src="__PUBLIC__/assets/js/date-time/bootstrap-datepicker.min.js"></script>
	<script src="__PUBLIC__/assets/js/fuelux/fuelux.spinner.min.js"></script>
	<script src="__PUBLIC__/assets/js/x-editable/bootstrap-editable.min.js"></script>
	<script src="__PUBLIC__/assets/js/x-editable/ace-editable.min.js"></script>
	<script src="__PUBLIC__/assets/js/jquery.maskedinput.min.js"></script>

	<!-- ace scripts -->

	<script src="__PUBLIC__/assets/js/ace-elements.min.js"></script>
	<script src="__PUBLIC__/assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->

	<script type="text/javascript">
		jQuery(function($) {
		
			//editables on first profile page
			$.fn.editable.defaults.mode = 'inline';
			$.fn.editableform.loading = "<div class='editableform-loading'><i class='light-blue icon-2x icon-spinner icon-spin'></i></div>";
		    $.fn.editableform.buttons = '<button type="submit" class="btn btn-info editable-submit"><i class="icon-ok icon-white"></i></button>'+
		                                '<button type="button" class="btn editable-cancel"><i class="icon-remove"></i></button>';    
			
			//editables 
		    $('#username').editable({
				type: 'text',
				name: 'username'
		    });
		
		
			var countries = [];
		    $.each({ "CA": "Canada", "IN": "India", "NL": "Netherlands", "TR": "Turkey", "US": "United States"}, function(k, v) {
		        countries.push({id: k, text: v});
		    });
		
			var cities = [];
			cities["CA"] = [];
			$.each(["Toronto", "Ottawa", "Calgary", "Vancouver"] , function(k, v){
				cities["CA"].push({id: v, text: v});
			});
			cities["IN"] = [];
			$.each(["Delhi", "Mumbai", "Bangalore"] , function(k, v){
				cities["IN"].push({id: v, text: v});
			});
			cities["NL"] = [];
			$.each(["Amsterdam", "Rotterdam", "The Hague"] , function(k, v){
				cities["NL"].push({id: v, text: v});
			});
			cities["TR"] = [];
			$.each(["Ankara", "Istanbul", "Izmir"] , function(k, v){
				cities["TR"].push({id: v, text: v});
			});
			cities["US"] = [];
			$.each(["New York", "Miami", "Los Angeles", "Chicago", "Wysconsin"] , function(k, v){
				cities["US"].push({id: v, text: v});
			});
			
			var currentValue = "NL";
		    $('#country').editable({
				type: 'select2',
				value : 'NL',
		        source: countries,
				success: function(response, newValue) {
					if(currentValue == newValue) return;
					currentValue = newValue;
					
					var new_source = (!newValue || newValue == "") ? [] : cities[newValue];
					
					//the destroy method is causing errors in x-editable v1.4.6
					//it worked fine in v1.4.5
					/**			
					$('#city').editable('destroy').editable({
						type: 'select2',
						source: new_source
					}).editable('setValue', null);
					*/
					
					//so we remove it altogether and create a new element
					var city = $('#city').removeAttr('id').get(0);
					$(city).clone().attr('id', 'city').text('Select City').editable({
						type: 'select2',
						value : null,
						source: new_source
					}).insertAfter(city);//insert it after previous instance
					$(city).remove();//remove previous instance
					
				}
		    });
		
			$('#city').editable({
				type: 'select2',
				value : 'Amsterdam',
		        source: cities[currentValue]
		    });
		
		
		
			$('#signup').editable({
				type: 'date',
				format: 'yyyy-mm-dd',
				viewformat: 'dd/mm/yyyy',
				datepicker: {
					weekStart: 1
				}
			});
		
		    $('#age').editable({
		        type: 'spinner',
				name : 'age',
				spinner : {
					min : 16, max:99, step:1
				}
			});
			
			//var $range = document.createElement("INPUT");
			//$range.type = 'range';
		    $('#login').editable({
		        type: 'slider',//$range.type == 'range' ? 'range' : 'slider',
				name : 'login',
				slider : {
					min : 1, max:50, width:100
				},
				success: function(response, newValue) {
					if(parseInt(newValue) == 1)
						$(this).html(newValue + " hour ago");
					else $(this).html(newValue + " hours ago");
				}
			});
		
			$('#about').editable({
				mode: 'inline',
		        type: 'wysiwyg',
				name : 'about',
				wysiwyg : {
					//css : {'max-width':'300px'}
				},
				success: function(response, newValue) {
				}
			});
			
			
			
			// *** editable avatar *** //
			try {//ie8 throws some harmless exception, so let's catch it
		
				//it seems that editable plugin calls appendChild, and as Image doesn't have it, it causes errors on IE at unpredicted points
				//so let's have a fake appendChild for it!
				if( /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase()) ) Image.prototype.appendChild = function(el){}
		
				var last_gritter
				$('#avatar').editable({
					type: 'image',
					name: 'avatar',
					value: null,
					image: {
						//specify ace file input plugin's options here
						btn_choose: 'Change Avatar',
						droppable: true,
						/**
						//this will override the default before_change that only accepts image files
						before_change: function(files, dropped) {
							return true;
						},
						*/
		
						//and a few extra ones here
						name: 'avatar',//put the field name here as well, will be used inside the custom plugin
						max_size: 110000,//~100Kb
						on_error : function(code) {//on_error function will be called when the selected file has a problem
							if(last_gritter) $.gritter.remove(last_gritter);
							if(code == 1) {//file format error
								last_gritter = $.gritter.add({
									title: 'File is not an image!',
									text: 'Please choose a jpg|gif|png image!',
									class_name: 'gritter-error gritter-center'
								});
							} else if(code == 2) {//file size rror
								last_gritter = $.gritter.add({
									title: 'File too big!',
									text: 'Image size should not exceed 100Kb!',
									class_name: 'gritter-error gritter-center'
								});
							}
							else {//other error
							}
						},
						on_success : function() {
							$.gritter.removeAll();
						}
					},
				    url: function(params) {
						// ***UPDATE AVATAR HERE*** //
						//You can replace the contents of this function with examples/profile-avatar-update.js for actual upload
		
		
						var deferred = new $.Deferred
		
						//if value is empty, means no valid files were selected
						//but it may still be submitted by the plugin, because "" (empty string) is different from previous non-empty value whatever it was
						//so we return just here to prevent problems
						var value = $('#avatar').next().find('input[type=hidden]:eq(0)').val();
						if(!value || value.length == 0) {
							deferred.resolve();
							return deferred.promise();
						}
		
		
						//dummy upload
						setTimeout(function(){
							if("FileReader" in window) {
								//for browsers that have a thumbnail of selected image
								var thumb = $('#avatar').next().find('img').data('thumb');
								if(thumb) $('#avatar').get(0).src = thumb;
							}
							
							deferred.resolve({'status':'OK'});
		
							if(last_gritter) $.gritter.remove(last_gritter);
							last_gritter = $.gritter.add({
								title: 'Avatar Updated!',
								text: 'Uploading to server can be easily implemented. A working example is included with the template.',
								class_name: 'gritter-info gritter-center'
							});
							
						 } , parseInt(Math.random() * 800 + 800))
		
						return deferred.promise();
					},
					
					success: function(response, newValue) {
					}
				})
			}catch(e) {}
			
			
		
			//another option is using modals
			$('#avatar2').on('click', function(){
				var modal = 
				'<div class="modal hide fade">\
					<div class="modal-header">\
						<button type="button" class="close" data-dismiss="modal">&times;</button>\
						<h4 class="blue">Change Avatar</h4>\
					</div>\
					\
					<form class="no-margin">\
					<div class="modal-body">\
						<div class="space-4"></div>\
						<div style="width:75%;margin-left:12%;"><input type="file" name="file-input" /></div>\
					</div>\
					\
					<div class="modal-footer center">\
						<button type="submit" class="btn btn-small btn-success"><i class="icon-ok"></i> Submit</button>\
						<button type="button" class="btn btn-small" data-dismiss="modal"><i class="icon-remove"></i> Cancel</button>\
					</div>\
					</form>\
				</div>';
				
				
				var modal = $(modal);
				modal.modal("show").on("hidden", function(){
					modal.remove();
				});
		
				var working = false;
		
				var form = modal.find('form:eq(0)');
				var file = form.find('input[type=file]').eq(0);
				file.ace_file_input({
					style:'well',
					btn_choose:'Click to choose new avatar',
					btn_change:null,
					no_icon:'icon-picture',
					thumbnail:'small',
					before_remove: function() {
						//don't remove/reset files while being uploaded
						return !working;
					},
					before_change: function(files, dropped) {
						var file = files[0];
						if(typeof file === "string") {
							//file is just a file name here (in browsers that don't support FileReader API)
							if(! (/\.(jpe?g|png|gif)$/i).test(file) ) return false;
						}
						else {//file is a File object
							var type = $.trim(file.type);
							if( ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
									|| ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )//for android default browser!
								) return false;
		
							if( file.size > 110000 ) {//~100Kb
								return false;
							}
						}
		
						return true;
					}
				});
		
				form.on('submit', function(){
					if(!file.data('ace_input_files')) return false;
					
					file.ace_file_input('disable');
					form.find('button').attr('disabled', 'disabled');
					form.find('.modal-body').append("<div class='center'><i class='icon-spinner icon-spin bigger-150 orange'></i></div>");
					
					var deferred = new $.Deferred;
					working = true;
					deferred.done(function() {
						form.find('button').removeAttr('disabled');
						form.find('input[type=file]').ace_file_input('enable');
						form.find('.modal-body > :last-child').remove();
						
						modal.modal("hide");
		
						var thumb = file.next().find('img').data('thumb');
						if(thumb) $('#avatar2').get(0).src = thumb;
		
						working = false;
					});
					
					
					setTimeout(function(){
						deferred.resolve();
					} , parseInt(Math.random() * 800 + 800));
		
					return false;
				});
						
			});
		
			
		
			//////////////////////////////
			$('#profile-feed-1').slimScroll({
			height: '250px',
			alwaysVisible : true
			});
		
			$('.profile-social-links > a').tooltip();
		
			$('.easy-pie-chart.percentage').each(function(){
			var barColor = $(this).data('color') || '#555';
			var trackColor = '#E2E2E2';
			var size = parseInt($(this).data('size')) || 72;
			$(this).easyPieChart({
				barColor: barColor,
				trackColor: trackColor,
				scaleColor: false,
				lineCap: 'butt',
				lineWidth: parseInt(size/10),
				animate:false,
				size: size
			}).css('color', barColor);
			});
		  
			///////////////////////////////////////////
		
			//show the user info on right or left depending on its position
			$('#user-profile-2 .memberdiv').on('mouseenter', function(){
				var $this = $(this);
				var $parent = $this.closest('.tab-pane');
		
				var off1 = $parent.offset();
				var w1 = $parent.width();
		
				var off2 = $this.offset();
				var w2 = $this.width();
		
				var place = 'left';
				if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) place = 'right';
				
				$this.find('.popover').removeClass('right left').addClass(place);
			}).on('click', function() {
				return false;
			});
		
		
			///////////////////////////////////////////
			$('#user-profile-3')
			.find('input[type=file]').ace_file_input({
				style:'well',
				btn_choose:'Change avatar',
				btn_change:null,
				no_icon:'icon-picture',
				thumbnail:'large',
				droppable:true,
				before_change: function(files, dropped) {
					var file = files[0];
					if(typeof file === "string") {//files is just a file name here (in browsers that don't support FileReader API)
						if(! (/\.(jpe?g|png|gif)$/i).test(file) ) return false;
					}
					else {//file is a File object
						var type = $.trim(file.type);
						if( ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
								|| ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )//for android default browser!
							) return false;
		
						if( file.size > 110000 ) {//~100Kb
							return false;
						}
					}
		
					return true;
				}
			})
			.end().find('button[type=reset]').on(ace.click_event, function(){
				$('#user-profile-3 input[type=file]').ace_file_input('reset_input');
			})
			.end().find('.date-picker').datepicker().next().on(ace.click_event, function(){
				$(this).prev().focus();
			})
			$('.input-mask-phone').mask('(999) 999-9999');
			$('.input-mask-telephone').mask('(999) 9999-9999');
		
		
		
			////////////////////
			//change profile
			$('[data-toggle="buttons"] .btn').on('click', function(e){
				var target = $(this).find('input[type=radio]');
				var which = parseInt(target.val());
				$('.user-profile').parent().addClass('hide');
				$('#user-profile-'+which).parent().removeClass('hide');
			});
		});
	</script>
</block>
